<template>
  <div class="classification-center">
    <div class="classification-left">
        <div class="title">+ 增加分类</div>
        <div class="addclassification">
         <Button type="primary" @click="addclassification()">+ 新增分类</Button>
        </div>  
        <div class="classification-item" v-for="(item,index) in apiData.producttypeList" :key="index">
            <div class="classification-item-father">
                <div class="title-father">
                    <Input
                v-if="item.isEdit"
                  placeholder="请输入商品分类名称，不超过6个汉字"
                  v-model="item.name"
                  maxlength="6"
                  style="width:310px"
                />
                <span  v-else>{{item.name}}</span>
                </div>
                <div class="classification-item-addSon" @click="addSon(item,index)">
                   + 子类
                </div>
                <img v-if="!item.isEdit" @click="getSort(index,'up')" src="@/assets/images/arrow_up.png">
                <img v-if="!item.isEdit" @click="getSort(index,'down')" src="@/assets/images/arrow_down.png">
                <img v-if="!item.isEdit" @click="editClassification(index)" src="@/assets/images/edit.png">
                <img  v-if="item.isEdit"  @click="saveClassification(item,index)" src="@/assets/images/save.png">
                <img @click="deleteClassification(item,index)" src="@/assets/images/delete.png">

            </div>
            <div class="classification-item-son" v-for="(items,idx) in item.children" :key="idx">
                <div class="title-son"><div class="line"></div>
                <Input
                v-if="items.isEdit"
                  placeholder="请输入二级分类名称，不超过6个汉字"
                  v-model="items.name"
                  maxlength="6"
                 style="width:270px"
                />
                <span  v-else>{{items.name}}</span>
                </div>
                <img v-if="!items.isEdit" @click="getSonSort(index,idx,'up')" src="@/assets/images/arrow_up.png">
                <img v-if="!items.isEdit" @click="getSonSort(index,idx,'down')" src="@/assets/images/arrow_down.png">
                <img v-if="!items.isEdit" @click="editSonClassification(index,idx)" src="@/assets/images/edit.png">
                <img v-if="items.isEdit" @click="saveClassification(items,idx)" src="@/assets/images/save.png">
                <img @click="deleteClassification(items,index,idx)" src="@/assets/images/delete.png">
            </div>

        </div>
    </div>
    <!-- <div class="effect">
      <div class="title">分类预览</div>
      <div class="effect-center"></div>
    </div> -->
  </div>
</template>

<script>
import {apiProducttypeList,apiProducttypeDelete,apiProducttypeSave,apiProducttypeUpdate,apiProducttypeMove} from '@/api/classification-manage.js'
export default {
  name: "classification-edit",
  data() {
    return {
           // query参数
      query: {},
      // 搜索参数
      search: {},
      diyDom: {},
      diyData: {
       
      },
      apiData:{
        producttypeList:[],
      }
    };
  },
  methods: {
    //添加父级分类
    addclassification(){
        var obj={
            createTime:"",
            id:'',
            level:1,
            children:[],
            name:'',
            isEdit:true,
            parentId:0,
            sort:this.apiData.producttypeList.length
        }
        this.apiData.producttypeList.push(obj)

    },
    addSon(item,index){
       var obj={
            createTime:"",
            id:'',
            level:2,
            name:'',
            isEdit:true,
            parentId:item.id,
            sort:this.apiData.producttypeList.length
        }
         this.apiData.producttypeList[index].children.push(obj)
    },
    //父级编辑
    editClassification(index){
      this.apiData.producttypeList[index].isEdit=true
    },
    //子级编辑
    editSonClassification(index,idx){
      this.apiData.producttypeList[index].children[idx].isEdit=true
    },
    //保存
    saveClassification(item,index){
      if(item.id){
        var opt={
          id:item.id,
          level:item.level,
          sort:item.sort,
          name:item.name,
          parentId:item.parentId
        }
        apiProducttypeUpdate(opt).then(res => {
          this.$Message.success('操作成功');
          this.getProducttypeList()
        });
      }else{
       var opt={
          name:item.name,
          parentId:item.parentId
        }
        apiProducttypeSave(opt).then(res => {
          this.$Message.success('操作成功');
          this.getProducttypeList()
        });
      }
      
    },
    //删除
    deleteClassification(item,index,idx){
      if(item.id){
        this.$Modal.confirm({
            title: '提示',
            content: '确认删除当前分类？',
            onOk: () => {
                apiProducttypeDelete({
                    ids: item.id
                }).then(res => {
                    this.$Message.success('操作成功');
                    this.getProducttypeList();
                });
            }
        });
      }else{
        if(item.level==1){
          this.apiData.producttypeList.splice(index,1)
        }else if(item.level==2){
          this.apiData.producttypeList[index].children.splice(idx,1)
        }
      }
      
    },
    getSort(index,type){
      
      if(type=='up'){
        var opt={
          id1:this.apiData.producttypeList[index-1>0?index-1:0].id,
          id2:this.apiData.producttypeList[index].id,
         }
         console.log(opt,'up')
      }else if(type=='down'){
         var opt={
          id1:this.apiData.producttypeList[index].id,
          id2:this.apiData.producttypeList[index+1>=this.apiData.producttypeList.length?index:index+1].id,
         }
          console.log(opt,'down')
      }
      apiProducttypeMove(opt).then(res => {
        this.getProducttypeList()
      });
    },
    getSonSort(index,idx,type){
      if(type=='up'){
         var opt={
          id1:this.apiData.producttypeList[index].children[idx-1>0?idx-1:0].id,
          id2:this.apiData.producttypeList[index].children[idx].id,
         }
      }else{
          var opt={
          id1:this.apiData.producttypeList[index].children[idx].id,
          id2:this.apiData.producttypeList[index].children[idx+1>=this.apiData.producttypeList[index].children.length?idx:idx+1].id,
         }
      }
      apiProducttypeMove(opt).then(res => {
        this.getProducttypeList()
      });
    },
    
    getProducttypeList(){
        apiProducttypeList().then(res => {
            var obj=[]
            for(var i=0;i<res.data.length;i++){
                if(res.data[i].level==1){
                    var data=res.data[i]
                    data.children=[]
                    data.isEdit=false
                    obj.push(data)
                }else{
                    obj=obj.map(item=>{
                        if(item.id==res.data[i].parentId){
                            var children=res.data[i]
                            children.isEdit=false
                            item.children.push(children)
                        }
                        return item
                    })
                }
               
            }
            this.apiData.producttypeList=obj
            console.log(obj)
        });
    }

  },
  mounted() {
   this.getProducttypeList()
  },
};
</script>

<style scoped lang="less">
.max-w200{
    max-width: 200px;
    width: 100%;
}
.classification-center {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .classification-left {
    width:100%;
    background: #fff;
    min-height: 700px;
    padding: 40px;
    box-sizing: border-box;
    margin-right: 20px;
    .title{
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 26.06px;
        color: rgba(56, 56, 56, 1);
        text-align: left;
        margin-bottom: 15px;
    }
    .classification-item{
        width: 100%;
        margin-top: 20px;
        .classification-item-father{
            width: 100%;
           
            display: flex;
            align-items: center;
            .title-father{
                 font-size: 16px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 23.17px;
                color: rgba(0, 0, 0, 1);
                width: 310px;
                 margin-right: 20px;
            }
            .classification-item-addSon{
                width: 80px;
                height: 24px;
                opacity: 1;
                border-radius: 2px;
                background: rgba(0, 0, 0, 0.15);
                font-size: 14px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 24px;
                color: rgba(0, 0, 0, 0.65);
                text-align: center;
                border: 1px solid #000000;
                 cursor: pointer;
            }
            img{
                width: 16px;
                height: 16px;
                margin-left: 20px;
                display: block;
                cursor: pointer;
            }
           
        }
 
        .classification-item-son{
                width: 100%;
        display: flex;
        margin-top: 20px;
        align-items: center;
        
        .title-son{
                padding-left: 15px;
        box-sizing: border-box;
        width: 310px;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 20.27px;
        color: rgba(0, 0, 0, 1);
        text-align: left;
        display: flex;
         margin-right: 20px;
        .line{
            width: 20px;
            height: 20px;
            position: relative;
            margin-top: -10px;
            border-left:1px solid #000000 ;
            border-bottom:1px solid #000000 ;
            margin-right: 20px;
        }
        }
         img{
                width: 16px;
                height: 16px;
                margin-right: 20px;
                display: block;
                cursor: pointer;
            }
        }
        
    }
  }
}
</style>
